<template>
  <div class="register">
    <Myalert :message="msg" :color="alertColor" 
    v-if="isAlertShow"
    @close-alert="closeAlertFn"></Myalert>
    <div class="img">
      <img src="../assets/logoko (2).png" alt="" />
    </div>
    <form action="">
      <div>
        <input type="text" v-model="form.username" placeholder="请输入用户名" />
      </div>
      <div>
        <input
          type="tel"
          v-model="form.userphone"
          placeholder="请输入手机号"
          maxlength="11"
        />
      </div>
      <div>
        <input type="email" v-model="form.useremail" placeholder="请输入邮箱" />
      </div>
      <div>
        <input
          type="password"
          v-model="form.userpwd"
          placeholder="请设置密码"
        />
      </div>
      <div>
        <input type="password" v-model="form.userpwd2" placeholder="确认密码" />
      </div>
      <div>
        <button @click="addUser">注册</button>
      </div>
      <div class="haveacc"><a href="" @click.prevent="jumpLogin"> 立即登录 </a></div>
    </form>
  </div>
</template>

<script>
import Myalert from '@/components/Myalert'
export default {
  components: {
    Myalert,
  },
  data() {
    return {
      msg: "这是xxx弹窗",
      isAlertShow: false,
      alertColor: '#fff',
      form: {
        username: "",
        userphone: "",
        useremail: "",
        userpwd: "",
        userpwd2: "",
      },
      users: [],
    };
  },
  methods: {
    jumpLogin() {
      this.$router.replace({ path: "/login" }).catch((err) => {});
    },
    addUser() {
      console.log(this.form);
      let { username, userphone, useremail, userpwd, userpwd2 } = this.form;
      if (username && userphone && useremail && userpwd && userpwd2) {
        if (userpwd == userpwd2) {
          let user = { username, userphone, useremail, userpwd};
          user.userid = Math.random().toString().slice(2);
          let arr = this.users;
          let newArr = arr.filter((item) => item.userphone == userphone);
          if (newArr.length == 0) {
            arr.push(user);
            this.users = arr;
            localStorage.setItem("USERS", JSON.stringify(arr));
            // alert("注册成功");
            this.showAlertFn("注册成功",'#33fffe')
            setTimeout(() => {
              //  跳转
              this.$router.replace({ path: "/login" });
            }, 500);
          } else {
            // alert("该账号已经存在");
            this.showAlertFn("该账号已经存在",'#fb0201')
          }
        } else {
          // alert("两次密码不一致");
          this.showAlertFn("两次密码不一致",'#fb0201')
        }
      } else {
        // alert("输入不能为空");
        this.showAlertFn("输入不能为空",'#fb0201')
      }
    },
     // 关闭自定义弹窗
     closeAlertFn(value){
      // 检查代码
      // console.log(value)
      this.isAlertShow = value;
    },
    // 显示自定义弹窗
    showAlertFn(message,color="#000"){
      this.msg = message;
      this.isAlertShow = true;
      this.alertColor = color;
    }
  },
  created() {
    let usersStr = localStorage.getItem("USERS");
    if (usersStr) {
      this.users = JSON.parse(usersStr);
    }
  },
};
</script>

<style lang="less" scoped>
@import "../style/variable.less";
.register {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #d6ceec;
  .img {
    width: 100px;
    height: 100px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .mask {
    position: absolute;
    top: 0;
    left: 0;
  }
  form {
    width: 100%;
    height: 100%;
    margin-top: 30px;
    div {
      width: 80%;
      margin: 0 auto;
      input {
        width: 300px;
        height: 40px;
        padding: 0 15px;
        margin: 10px 0;
        font-family: logotext;
        border-radius: 5px;
      }
      button {
        width: 100px;
        height: 40px;
        margin: 20px 100px;
        background-color: #ffffff;
        color: #baa6f2;
        font-weight: bolder;
        font-size: 18px;
        font-family: logotext;
        border-radius: 5px;
        &:focus {
          background-color: #baa6f2;
          color: #fff;
        }
      }
    }
    .haveacc {
      width: 100px;
      margin: 0 auto;
      text-align: center;
      a {
        text-align: center;
        color: #baa6f2;
        font-weight: bolder;
        font-size: 16px;
        font-family: logotext;
        border-radius: 5px;
        &:focus {
          background-color: #e2dcf1;
          color: #fff;
        }
      }
    }
  }
}
</style>